// ###############################################
//
// AUTHOR: Nick LaPrell (http://nick.laprell.org)  
//
// Use $.simpleModal() to draw a basic modal box.
// Populate the contents of the box by targeting
// #modalContent. The following options can be defined:
//
//   title - Title of the box.
//   titleColor - Color of the title.
//   titleBgColor - Color or image to use for the 
//                  background of the title.
//   borderColor - Color of the border.
//   exitButton - Text or image URL used for the close
//                button.
//   width - Box width.
//   height - Box height.
//   modalColor - Color used for the modal background.
//   draggable - Make the box draggable (Requires
//               jQuery UI Draggable function).
// 
// ###############################################

jqPlugins.simpleModal = true;

(function($){

  $.simpleModal = function(options){
    options = setOptions(options);

    $("html, body").css({height:'100%'});

    // CREATE THE MODAL BACKGROUND
    $("body").append(buildModalScreen(options));
    $("#modalScreen").animate({opacity:0.65},0).fadeIn(1000);
    $("body").append(buildModalBox(options));
    $("#modalBox").css({
      display:'none',
      backgroundColor:'#FFF',
      zIndex:101,
      width:options.width,
      height:options.height, 
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: options.borderColor,
      position:'absolute',
      top: options.top,
      left: options.left
    });
    options.contentHeight = ($("#modalBox").height() - 36) + 'px';
    $("#modalContent").css({height: options.contentHeight, padding: '5px',overflow:'auto'});
    $("#modalBox").fadeIn(1000);

    if(options.draggable && $("#modalBox").draggable){
      $("#modalBox").draggable({handle : "#modalTitle", opacity : 0.8});
      $("#modalTitle").css({cursor:'move'});
    }
  }

  $.closeModal = function(){
    $("#modalBox").animate({opacity:0.0},1000,function(){$(this).remove();});
    $("#modalScreen").animate({opacity:0.0},1000,function(){$(this).remove()});
  }

  function setOptions(options){
    // DEFAULT OPTIONS
    mOptions = {
      title:           '',
      titleColor:      '#000',
      titleBgColor:    'silver',
      borderColor:     '#000',
      exitButton:      '[X]',
      width:           '50%',
      height:          '50%',
      modalColor:      '#000',
      draggable:       true
    }
    // EXTEND DEFAULT OPTIONS
    var options = typeof options != 'undefined' ? $.extend(mOptions, options) : mOptions;

    if(options.width.match('%')){
      options.width = (options.width.replace('%','')/100) * $(document).width();
    }
    if(options.height.match('%')){
      options.height = (options.height.replace('%','')/100) * $(document).height();
    }

    options.titleBgColor = options.titleBgColor.match(/\./) ? 
      'background-image:url(\'' + options.titleBgColor + '\');' :  
      'background-color:' + options.titleBgColor + ';';

    options.exitButton = options.exitButton.match(/\./) ?
      "<img src=\"" + options.exitButton + "\"\/>" :
      options.exitButton;

    options.top = (($(document).height()-options.height)/2) + 'px';
    options.left = (($(document).width()-options.width)/2) + 'px';
    options.width += 'px';
    options.height += 'px';

    return options;
  }

  function buildModalScreen(options){
    return "<div id=\"modalScreen\" style=\"z-index:100;position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:" + options.modalColor + ";display:none;\">&nbsp;<\/div>";
  }

  function buildModalBox(options){
    return "<div id=\"modalBox\"><div id=\"modalTitle\" style=\"line-height:18px;height:18px;" + options.titleBgColor + "border-bottom: 1px solid " + options.borderColor + ";padding:3px;\"><span style=\"float:left;margin-left:3px;color:" + options.titleColor + ";\">" + options.title + "<\/span><a style=\"float:right;margin-right:3px;\" href=\"javascript:$.closeModal();\">" + options.exitButton + "<\/a><\/div><div id=\"modalContent\">&nbsp;</div><\/div>";
  }

})(jQuery);